<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>发送ajax请求</button>
    <script>
        /**
         *  XMLHttpRequest()
         *  本质也是http请求
         *  
         *  请求报文：
         * 1. 请求行： get  http://localhost:8080/index  HTTP 1.1
         * 2. 请求头： 
         * 3. 空行
         * 4. 请求体：
         * 
         */
        let oBtn = document.querySelector('button');
        oBtn.onclick = function(){
            console.log('1111');
            // 1. 创建xhr对象
            const xhr = new XMLHttpRequest();
            // 2. 打开链接
            xhr.open('get', 'http://localhost:8080/get_ajax');
            // 3. 发送请求
            xhr.send();
            // 4. 接收服务器端响应的数据
            /**
             *  readyState: 0 1 2 3 4
             *  
             *  状态码：
             *  1xx: 客户端指定动作
             *  2xx: 请求成功
             *  3xx: 重定向
             *  4xx: 客户端错误
             *  5xx: 服务器端错误
             */
            
            /**
             *  响应行：  200  ok
             *  响应头：  
             *  空行：
             *  响应体:
             * 
             */
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
                if(xhr.readyState === 4){
                    console.log('服务器响应数据完毕');
                    console.log(xhr.status, xhr.statusText);
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log('请求成功');
                        console.log(xhr.response);// 服务器端响应回来的相应体
                    }
                }
            }
        }
    </script>
</body>
</html>